<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-10-16 16:11:35
 * @LastEditTime: 2019-10-17 17:00:35
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="photoinfo-container">
    <h3>{{photoInfo.title}}</h3>
    <div class="subtitle">
      <span>发表时间:{{photoInfo.add_time|dateFormatter}}</span>
      <span>点击次数:{{photoInfo.click}}</span>
    </div>
    <hr>
    <!-- 缩略图 -->
    <div class="thumb">
        <vue-preview :slides="list"></vue-preview>
    </div>
    <div class="photoinfo-content" v-html="photoInfo.content"></div>
    <comment :id="id"></comment>
  
  </div>
</template>
<script>
import comment from '../subcomponents/comment.vue' 
export default {
  data(){
    return {
      id:this.$route.params.id,
      photoInfo:{},
       list: []
    }
  },
  created(){
    this.getPhotoInfo();
    this.getThumbnail();
  },
  methods: {
    getPhotoInfo(){
      this.$http.get('api/getimageInfo/'+this.id).then(result=>{
        var res=result.body;
        if(res.status===0){
          this.photoInfo=res.message[0]
        }
      })
    },
    //获取缩略图
    getThumbnail(){
      this.$http.get('api/getthumimages/'+this.id).then(result=>{
        var res=result.body;
        if(res.status===0){
          this.list=res.message
          this.list.forEach(element => {
              element.msrc=element.src,
              element.w=100,
              element.h=100
          });
        }
      })
    },
  },
  components:{
    comment:comment,
  }
}
</script>
<style lang="scss" scoped>
  .photoinfo-container{
    padding: 10px;
    h3{
      font-size: 15px;
      color: #333;
      text-align: center;
      margin: 15px 0;
    }
    .subtitle{
      font-size: 12px;
      display: flex;
      justify-content: space-between
    }
    .thumb{
      /deep/ .my-gallery{
        display: flex;
        flex-wrap: wrap;
        figure{
          width:27%;
          margin: 10px;
        }
        img{
          width: 100%;
          height: 100%;
        }
    }
    }
    
  }
</style>